<template>
  <div>
    <!-- 4-6 -->
    <van-nav-bar right-text="帮助" left-arrow @click-left="$router.go(-1)" @click-right="help" />
    <div class="header">
      <img src="~assets/logo.png" alt="default_logo" class="logo" />
    </div>
    <div class="content">
      <van-field
        placeholder="输入手机号码"
        v-model="phoneNumber"
        left-icon="phone-o"
        :error-message="phoneNumberError"
      />
      <!-- eye -->
      <van-field
        v-if="loginWay==='password'"
        placeholder="输入密码"
        v-model="password"
        left-icon="lock"
        :type="passwordType"
      >
        <van-icon
          slot="right-icon"
          color="#1989fa"
          @click="switchPasswordType"
          :name="passwordIcon"
        />
      </van-field>
      <van-field v-else placeholder="短信验证码" v-model="password" left-icon="comment-o" type="text">
        <VerifyCodeBtn slot="button" @sendVerifyCode="sendVerifyCode" />
      </van-field>
      <div class="button-wrap">
        <van-button size="large" @click="handleLogin" class="h40 br-10" type="info">登录</van-button>
      </div>
      <div class="flex-a f14 mt20 c-blue pw20">
        <div>
          <div class="switch-way" @click="switchLoginWay">{{loginWayObj.toggleMsg}}</div>
        </div>
        <div>忘记密码</div>
      </div>
      <!-- <div class="more-wrap">
        <router-link class="link" to="/register">没有账号？去注册</router-link>
        <div class="switch-way" @click="switchLoginWay">{{loginWayObj.toggleMsg}}</div>
      </div>-->
      <div class="more-wrap"></div>
      <van-row>
        <van-col span="20" offset="2">
          <div class="flex-b">
            <img src="~assets/img/qq.png" alt />
            <img src="~assets/img/weibo.png" alt />
            <img src="~assets/img/wechat.png" alt />
          </div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>
<script>
import { mapActions } from "vuex";
import VerifyCodeBtn from "@/components/VerifyCodeBtn";
export default {
  name: "Login",
  data() {
    return {
      phoneNumber: "",
      password: "",
      code: "",
      loginWay: "password",
      passwordType: "password",
      phoneNumberError: ""
    };
  },
  methods: {
    sendVerifyCode() {
      this.phoneNumberError = "";
      if (!this.phoneNumber) {
        // 根据需求做判断
        this.phoneNumberError = "手机号码必填";
      }
    },
    switchPasswordType() {
      this.passwordType =
        this.passwordType === "password" ? "text" : "password";
    },
    switchLoginWay() {
      this.password = this.code = "";
      this.loginWay = this.loginWay === "password" ? "verifyCode" : "password";
    },
    handleLogin() {
      const data = {
        phoneNumber: this.phoneNumber,
        password: this.password,
        $router: this.$router,
        $route: this.$route
      };
      this.login(data);
    },
    help() {
      // 帮助
      console.log("帮助.");
    },
    ...mapActions({
      login: "user/login"
    })
  },
  computed: {
    loginWayObj: function() {
      if (this.loginWay === "password") {
        return {
          icon: "closed-eye",
          toggleMsg: "验证码登录"
        };
      }
      return {
        icon: "eye",
        toggleMsg: "密码登录"
      };
    },
    passwordIcon: function() {
      return this.passwordType === "password" ? "closed-eye" : "eye";
    }
  },
  components: {
    VerifyCodeBtn
  }
};
</script>
<style lang="scss" scoped>
.header {
  width: 100%;
  height: 120px;
  .logo {
    width: 150px;
    margin-top: 90px;
    margin-left: 30px;
  }
}
.content {
  width: 100%;
  height: auto;
  padding: 0 15px;
  box-sizing: border-box;
  .button-wrap {
    width: 100%;
    height: auto;
    margin-top: 15px;
  }
}
.more-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
  font-size: 14px;
  a.link {
    color: #1989fa;
  }
  .switch-way {
    color: #333;
  }
}
</style>
